import { Alert, Flex, View, Badge, Link } from '@aws-amplify/ui-react';
import { Example, ExampleCode } from '@/components/Example';
import { ComponentStyleDisplay } from '@/components/ComponentStyleDisplay';
import ThemeExample from '@/components/ThemeExample.mdx';
import { AlertDemo } from './demo';
import {
  AccessibleAlert,
  DefaultAlertExample,
  AlertVariationsExample,
  AlertHeadingExample,
  AlertIconExample,
  DismissibleAlertExample,
  OnDismissAlertExample,
  AlertStylePropsExample,
  AlertThemeExample,
  DismissButtonLabelExample,
  RoleOverride
} from './examples';

<Badge variation="info">Usage note:</Badge> The Alert component has an ARIA `alert` role by default which has some <Link href="#accessibility">accessibility implications</Link>. 

## Demo

<AlertDemo />

## Usage

Import the Alert component and styles.

<Example>
  <View>
    <DefaultAlertExample />
  </View>
  
  <ExampleCode>

```jsx file=./examples/DefaultAlertExample.tsx

```

  </ExampleCode>
</Example>

### Variations

Use the `variation` prop to change the Alert variation. Available options are `info`, `error`, `warning`, `success`, and none (default).

<Example>
  <View>
    <AlertVariationsExample />
  </View>
  
  <ExampleCode>

```jsx file=./examples/AlertVariationsExample.tsx

```

  </ExampleCode>
</Example>

### Heading

Use the `heading` prop to pass a heading to the Alert.

<Example>
  <View>
    <AlertHeadingExample />
  </View>
  
  <ExampleCode>

```jsx file=./examples/AlertHeadingExample.tsx

```

  </ExampleCode>
</Example>

### Icon

Use the `hasIcon` prop to change whether the Alert includes an icon. Defaults to `true` (includes icon). 

<Example>
  <View>
    <AlertIconExample />
  </View>
  
  <ExampleCode>

```jsx file=./examples/AlertIconExample.tsx

```

  </ExampleCode>
</Example>

### Dismissible

Use the `isDismissible` prop to control whether the user can dismiss the Alert. Defaults to `false` (not dismissible).

<Example>
  <View>
    <DismissibleAlertExample />
  </View>
  
  <ExampleCode>

```jsx file=./examples/DismissibleAlertExample.tsx

```

  </ExampleCode>
</Example>

### onDismiss

Use the `onDismiss` prop to pass a function that will run when the Alert is dismissed. Note that `isDismissible` must be set to `true`.

<Example>
  <View>
    <OnDismissAlertExample />
  </View>
  
  <ExampleCode>

```jsx file=./examples/OnDismissAlertExample.tsx

```

  </ExampleCode>
</Example>

## CSS Styling

<ThemeExample component="Alert">
  <Example>
    <AlertThemeExample />
    
    <ExampleCode>

    ```tsx file=./examples/AlertThemeExample.tsx

    ```

    </ExampleCode>
  </Example>
</ThemeExample>

### Target classes

<ComponentStyleDisplay componentName="Alert" />

### Global styling

To override styling on all Alerts, you can set the Amplify CSS variables or use the built-in `.amplify-alert` class.

<Example>
  <View>
    <Alert backgroundColor="yellow">Change the default Alert to yellow</Alert>
  </View>
  
  <ExampleCode>

```css
/* styles.css */
:root {
  --amplify-components-alert-background-color: yellow;
}
/* OR */
.amplify-alert {
  background-color: yellow;
}
```

  </ExampleCode>
</Example>

To replace the Alert styling, unset it:

<ExampleCode>

```css
.amplify-alert {
  all: unset;
  /* Add your styling here*/
}
```

</ExampleCode>

### Local styling

To override styling on a specific Alert, you can use (in order of increasing specificity): a class selector, data attributes, or style props.

_Using a class selector:_

<Example>
  <Alert className="purple-alert" heading="Attention">
    This is a purple Alert
  </Alert>
  
  
  <ExampleCode>

```css
/* styles.css */
.purple-alert {
  color: white;
  background-color: rebeccapurple;
}
```

  </ExampleCode>
  <ExampleCode>

```jsx
import './styles.css';

<Alert className="purple-alert" heading="Attention">
  This is a purple Alert
</Alert>;
```

  </ExampleCode>
</Example>

_Using data attributes:_

<Example>
  <Flex direction="column" gap="1rem">
    <Alert
      variation="error"
      color="white"
      backgroundColor="crimson"
      heading="System Error"
    >
      Red Alert!
    </Alert>
    <Alert>Default Alert styling unaffected</Alert>
  </Flex>
  
  <ExampleCode>

```css
/* styles.css */
/* Override only error variation styles */
.amplify-alert[data-variation='error'] {
  color: white;
  background-color: crimson;
}
```

  </ExampleCode>
  <ExampleCode>

```jsx
import './styles.css';

<Alert variation="error" heading="System Error">Red Alert!</Alert>
<Alert>Default Alert styling unaffected</Alert>
```

  </ExampleCode>
</Example>

_Using style props:_

<Example>
  <AlertStylePropsExample />
  
  <ExampleCode>

```jsx file=./examples/AlertStylePropsExample.tsx

```

  </ExampleCode>
</Example>

## Accessibility

The Alert component in Amplify UI has the `alert` role by default.  The `alert` role is an assertive live region which means any changes to the content of the Alert or adding the Alert dynamically to the DOM will cause the Alert to be announced by a screen reader. **This can be disruptive** to screen reader users, so it is best used sparingly and only when the Alert content requires the user's immediate attention.

Please see the <Link isExternal={true} href="https://www.w3.org/WAI/ARIA/apg/patterns/alert/examples/alert/">ARIA Authoring Practices Guide for the `alert` role</Link> for more information and use cases.

### Dynamic Alert

The following code shows an example of dynamically displaying an Alert. A screenreader will announce the content of the Alert when it is visible.

<Example>
  <AccessibleAlert />
  
  <ExampleCode>

```jsx file=./examples/AccessibleAlert.tsx

```

  </ExampleCode>
</Example>

### Role override

If you're displaying information that isn't critical or time sensitive, and only want the visual style of the Alert component without the accessibility side effects, you can override the role attribute like in the following example:

<Example>
  <RoleOverride />
  
  <ExampleCode>

```jsx file=./examples/RoleOverride.tsx

```

  </ExampleCode>
</Example>


### Custom aria label

You can configure a custom `aria-label` for the dismiss button using the `dismissButtonLabel` prop (defaults to `'Dismiss alert'`).

<Example>
  <DismissButtonLabelExample />
  
  <ExampleCode>

```jsx file=./examples/DismissButtonLabelExample.tsx

```

  </ExampleCode>
</Example>